<template>
  <div class="login">
    <el-form
      ref="form"
      :label-position="labelPosition"
      :rules="rules"
      label-width="80px"
      :model="form"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" text="text"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit('form')"
          :loading="isLoginLoading"
        >
          注册
        </el-button>
        <el-button @click="onLogin">
          已有用户？点击前往登录
        </el-button>
        <el-button type="warning" @click="onhref">
          返回主页
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data () {
    return {
      labelPosition: 'top',
      form: {
        username: '',
        password: ''
      },
      isLoginLoading: false,
      // 表单校验
      rules: {
        username: [
          {
            required: true,
            message: '长度为6的数字',
            trigger: 'blur'
          },
          {
            length: 6,
            message: '长度为6的数字',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '长度为6',
            trigger: 'blur'
          },
          {
            length: 6,
            message: '长度为6',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  name: 'LogIn',
  methods: {
    // 登录功能
    async onSubmit (form) {
      try {
        // 设置校验
        await this.$refs[form].validate()
        // var userData = this.qs.stringify(this.form);
        // 发送请求
        this.isLoginLoading = true
        const { data } = await request({
          method: 'POST',
          // headers: { 'Content-Type': "application/x-www/from"}
          url: 'http://localhost:3000/register',
          data: this.qs.stringify(this.form)
        })
        this.isLoginLoading = false
        // 响应处理
        // eslint-disable-next-line eqeqeq
        if (data.code == 10000) {
          this.$router.push({
            name: 'login'
          })
          this.$message.success('注册成功')
        } else {
          this.$message.error(data.message)
        }
      } catch (err) {
        // 校验失败
        this.$message.error('注册失败,没有通过校验请检查输入是否正确')
        this.isLoginLoading = false
      }
    },
    open2 () {
      this.$message({
        message: '注册成功',
        type: 'success'
      })
    },
    open4 () {
      this.$message.error('注册失败')
    },
    onhref () {
      this.$router.push({
        name: 'home'
      })
    },
    onLogin () {
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>

<style scoped>
.login {
  height: 100vh;
  display: flex;
  /* 水平居中 */
  justify-content: center;
  align-items: center;
  background-color: #ddeeff;
}
.el-form {
  background-color: #fff;
  padding: 20px;
  width: 300px;
  border-radius: 20px;
}
.el-button {
  width: 100%;
  margin-top: 20px;
  margin-left: 0px;
}
</style>
